<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-09-23 15:16:35
 * @LastEditTime: 2019-10-25 09:55:39
 * @LastEditors: Please set LastEditors
 -->
<template>
  <div class="container">
    <div class="container_card">
      <div class="container_head">
        <svg-icon icon-class="list" />  角色列表
      </div>
      <div class="container_body">
        <div class="btn_add"><el-button type="primary" @click="add_role">
          添加角色</el-button>
        </div>
        <div>
          <el-table
            :data="tableData"
            highlight-current-row
            border
          >
            <el-table-column
              prop="name"
              label="角色名称"
            />
            <el-table-column
              prop="name"
              label="查看权限"
            >
              <template slot-scope="scope">
                <el-button type="primary" plain size="mini" @click="view(scope.row.id)"><svg-icon icon-class="nested" /></el-button>
              </template>
            </el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              width="100"
            >
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="delete_role(scope.row.id)">删除</el-button>
                <el-button type="text" size="small" @click="save_role(scope.row.id)">编辑</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <el-dialog
      title="查看权限"
      :visible.sync="dialogVisible"
      width="60%"
      :before-close="handleClose"
    >
      <div>
        <el-tree
          ref="tree"
          class="filter-tree"
          :data="treeData"
          default-expand-all
          node-key="id"
          highlight-current
          :props="defaultProps"
        />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [],
      dialogVisible: false,
      treeData: [],
      current: [],
      defaultProps: []
    }
  },
  mounted() {
    this.$api.role_list([]).then(res => {
      this.tableData = Object.values(res.data)
      console.log(this.tableData)
    })
  },
  methods: {
    handleClose() {

    },
    add_role() {
      this.$router.push('/permission/role-add')
    },
    save_role(id) {
      this.$router.push({
        path: '/permission/role-add',
        query: {
          id: id
        }
      })
    },
    view(id) {
      const data = {
        id: id
      }
      this.$api.view_permissin(data).then(res => {
        for (let i = 0; i < res.data.length; i++) {
          res.data[i].label = res.data[i].name
          if (res.data[i].children) {
            for (let j = 0; j < res.data[i].children.length; j++) {
              res.data[i].children[j].label = res.data[i].children[j].name
            }
          }
        }
        this.treeData = res.data
        this.dialogVisible = true
      })
    },
    delete_role(id) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$api.delete_permission({ id: id }).then(res => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          for (let i = 0; i < this.tableData.length; i++) {
            if (this.tableData[i].id === id) {
              this.tableData.splice(this.tableData.indexOf(this.tableData[i], 1))
              break
            }
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>
<style scoped>
  .btn_add{
    margin-bottom: 40px;
  }
</style>
